<template>
  <div v-if="!allOrderList"></div>
  <div class="order-list" v-else>
    <van-nav-bar title="订单列表" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" size="20" color="#1ba784" />
      </template>
    </van-nav-bar>

    <van-tabs v-model:active="active" sticky @click-tab="onClickTab">
      <van-tab title="全部">
        <van-cell-group inset class="order-item">
          <van-cell
            v-for="(item, index) in allOrderList"
            class="order-item-item"
          >
            <van-card
              class="goods-card"
              :desc="`￥${item.total_amount}`"
              :title="`订单号：${item.order_id}`"
              :thumb="`${urlHost}${item.OrdersDetails[0].product_img}`"
            >
              <template #title>
                <span>
                  {{ item.state }}
                  <!-- {{ item.OrdersDetails[0].product_name }} -->
                </span>
              </template>
              <template #desc>
                <div class="info">
                  <span class="product-name">{{
                    item.OrdersDetails[0].product_name
                  }}</span>
                  <span class="price"> ￥{{ item.total_amount }} </span>
                </div>
              </template>
              <template #price>
                <span>共{{ item.OrdersDetails.length }}件商品</span>
              </template>
              <template #footer v-if="item.order_state === '0'">
                <van-tag
                  class="opre-btn"
                  size="medium"
                  @click="confirm(item)"
                  plain
                  color="#1ba784"
                  >确认收货</van-tag
                >
              </template>
            </van-card>
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab title="待收货">
        <van-cell-group inset class="order-item">
          <van-cell
            v-for="(item, index) in notReceivedOrderList"
            class="order-item-item"
          >
            <van-card
              class="goods-card"
              :desc="`￥${item.total_amount}`"
              :title="`订单号：${item.order_id}`"
              :thumb="`${urlHost}${item.OrdersDetails[0].product_img}`"
            >
              <template #title>
                <span>
                  {{ item.state }}
                  <!-- {{ item.OrdersDetails[0].product_name }} -->
                </span>
              </template>
              <template #desc>
                <div class="info">
                  <span class="product-name">{{
                    item.OrdersDetails[0].product_name
                  }}</span>
                  <span class="price"> ￥{{ item.total_amount }} </span>
                </div>
              </template>
              <template #price>
                <span>共{{ item.OrdersDetails.length }}件商品</span>
              </template>
              <template #footer v-if="item.order_state === '0'">
                <van-tag
                  class="opre-btn"
                  size="medium"
                  @click="confirm(item)"
                  plain
                  color="#1ba784"
                  >确认收货</van-tag
                >
              </template>
            </van-card>
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab title="已完成">
        <van-cell-group inset class="order-item">
          <van-cell
            v-for="(item, index) in receivedOrderList"
            class="order-item-item"
          >
            <van-card
              class="goods-card"
              :desc="`￥${item.total_amount}`"
              :title="`订单号：${item.order_id}`"
              :thumb="`${urlHost}${item.OrdersDetails[0].product_img}`"
            >
              <template #title>
                <span>
                  {{ item.state }}
                  <!-- {{ item.OrdersDetails[0].product_name }} -->
                </span>
              </template>
              <template #desc>
                <div class="info">
                  <span class="product-name">{{
                    item.OrdersDetails[0].product_name
                  }}</span>
                  <span class="price"> ￥{{ item.total_amount }} </span>
                </div>
              </template>
              <template #price>
                <span>共{{ item.OrdersDetails.length }}件商品</span>
              </template>
            </van-card>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getOrders, confirmOrder } from '@/api/modules/order'
import { useUserStore } from '@/store/user.store'
import { showToast } from 'vant'
const router = useRouter()
const userStore = useUserStore()
const active = ref(0)
const allOrderList = ref([])
const notReceivedOrderList = ref([])
const receivedOrderList = ref([])
const urlHost = import.meta.env.VITE_APP_URL
// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 获取订单列表
const getOrdersList = async (status) => {
  allOrderList.value = []
  notReceivedOrderList.value = []
  receivedOrderList.value = []
  const {
    userInfo: { app_user_id: userId }
  } = userStore
  const {
    data: { data }
  } = await getOrders({ userId, status })
  console.log(data)
  // order_state: 0 全部 1待收货 2 已完成
  data.forEach((element) => {
    // element.order_state = element.order_state === 1 ? '待收货' : '已完成'
    if (element.order_state === '0') {
      element.state = '待收货'
      notReceivedOrderList.value.push(element)
    } else if (element.order_state === '1') {
      element.state = '已完成'
      receivedOrderList.value.push(element)
    }
    allOrderList.value.push(element)
  })

  // allOrderList.value = data
}

// 确认收货
const confirm = async (item) => {
  try {
    const { order_id: orderId } = item
    const { data } = await confirmOrder({ orderId })
    showToast('确认收货成功')
    console.log(data)
    getOrdersList()
  } catch (error) {
    console.log(error)
  }
}

// 点击tab
const onClickTab = ({ title }) => {
  // console.log(title)
  if (title === '全部') {
    console.log('全部')
    // getOrdersList('0')
  } else if (title === '待收货') {
    console.log('待收货')
    // getOrdersList('1')
  } else {
    console.log('已完成')
    // getOrdersList('2')
  }
}

// ==================== 生命周期 ====================
onMounted(() => {
  getOrdersList(active.value.toString())
})
</script>

<style lang="less" scoped>
.order-list {
  background-color: @gray;
  min-height: 100vh;
}
.order-item {
  background-color: @gray;
  margin-top: 20px;
  .order-item-item {
    margin-bottom: 10px;
    overflow: hidden;
  }
}

.goods-card {
  margin: 0;
  background-color: #fff;
}
.product-name {
  display: block;
  font-size: 16px;
  // margin-top: 10px;
  overflow: hidden; /* 确保超出容器的内容被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  color: #333;
}

.price {
  display: block;
  // color: #ff3800;
  font-size: 20px;
  margin-top: 10px;
}
.opre-btn {
  margin-top: 5px;
}
</style>
